<template>
  <div class="entertainment-view">
    <!-- 头部横幅 -->
    <div class="entertainment-header">
      <div class="header-bg">
        <img src="../assets/喜剧电影.jpeg" alt="娱乐专题" class="header-image">
        <div class="header-overlay"></div>
      </div>
      <div class="header-content">
        <h1 class="header-title">精彩娱乐</h1>
        <p class="header-subtitle">搞笑视频、电影解说，让生活充满欢乐</p>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="entertainment-content">
      <!-- 标签页导航 -->
      <div class="tab-navigation">
        <button 
          v-for="tab in tabs" 
          :key="tab.key"
          class="tab-item"
          :class="{ active: activeTab === tab.key }"
          @click="switchTab(tab.key)"
        >
          {{ tab.name }}
        </button>
      </div>

      <!-- 标签页内容 -->
      <div class="tab-content">
        <!-- 搞笑视频 -->
        <div v-if="activeTab === 'funnyVideos'" class="funny-videos-section">
          <div class="section-header">
            <h2 class="section-title">😂 搞笑视频</h2>
            <a href="#" class="section-more">更多 <i class="fa fa-angle-right"></i></a>
          </div>
          
          <!-- 热门搞笑视频 -->
          <div class="hot-funny-section">
            <div class="hot-funny-video">
              <div class="hot-video-thumbnail">
                <img :src="hotFunnyVideo.thumbnail" alt="{{ hotFunnyVideo.title }}" class="hot-video-image">
                <div class="hot-video-overlay">
                  <div class="play-icon">
                    <i class="fa fa-play-circle"></i>
                  </div>
                  <div class="hot-video-duration">{{ hotFunnyVideo.duration }}</div>
                </div>
              </div>
              <div class="hot-video-info">
                <h3 class="hot-video-title">{{ hotFunnyVideo.title }}</h3>
                <div class="hot-video-meta">
                  <span class="hot-video-author">{{ hotFunnyVideo.author }}</span>
                  <div class="hot-video-stats">
                    <span class="hot-video-views"><i class="fa fa-eye"></i> {{ formatNumber(hotFunnyVideo.views) }}</span>
                    <span class="hot-video-likes"><i class="fa fa-heart"></i> {{ formatNumber(hotFunnyVideo.likes) }}</span>
                  </div>
                </div>
                <p class="hot-video-description">{{ hotFunnyVideo.description }}</p>
              </div>
            </div>
          </div>
          
          <!-- 搞笑视频列表 -->
          <div class="funny-videos-list">
            <div 
              v-for="video in funnyVideos" 
              :key="video.id"
              class="funny-video-item"
              @click="playFunnyVideo(video)"
            >
              <div class="funny-video-thumbnail">
                <img :src="video.thumbnail" alt="{{ video.title }}" class="funny-video-image">
                <div class="funny-video-duration">{{ video.duration }}</div>
              </div>
              <div class="funny-video-info">
                <h3 class="funny-video-title">{{ video.title }}</h3>
                <div class="funny-video-meta">
                  <span class="funny-video-author">{{ video.author }}</span>
                  <div class="funny-video-stats">
                    <span class="funny-video-views"><i class="fa fa-eye"></i> {{ formatNumber(video.views) }}</span>
                    <span class="funny-video-likes"><i class="fa fa-heart"></i> {{ formatNumber(video.likes) }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 电影解说 -->
        <div v-if="activeTab === 'movieExplainers'" class="movie-explainers-section">
          <div class="section-header">
            <h2 class="section-title">🎬 电影解说</h2>
            <a href="#" class="section-more">更多 <i class="fa fa-angle-right"></i></a>
          </div>
          
          <!-- 电影解说分类 -->
          <div class="movie-categories">
            <button 
              v-for="category in movieCategories" 
              :key="category"
              class="category-btn"
              :class="{ active: activeMovieCategory === category }"
              @click="switchMovieCategory(category)"
            >
              {{ category }}
            </button>
          </div>
          
          <!-- 电影解说列表 -->
          <div class="movie-explainers-grid">
            <div 
              v-for="explainer in filteredMovieExplainers" 
              :key="explainer.id"
              class="movie-explainer-card"
              @click="playMovieExplainer(explainer)"
            >
              <div class="movie-explainer-thumbnail">
                <img :src="explainer.thumbnail" alt="{{ explainer.title }}" class="movie-explainer-image">
                <div class="movie-explainer-duration">{{ explainer.duration }}</div>
                <div class="movie-score">评分: {{ explainer.movieScore }}</div>
              </div>
              <div class="movie-explainer-info">
                <h3 class="movie-explainer-title">{{ explainer.title }}</h3>
                <p class="movie-title">{{ explainer.movieTitle }}</p>
                <div class="movie-explainer-meta">
                  <span class="movie-explainer-author">{{ explainer.author }}</span>
                  <div class="movie-explainer-stats">
                    <span class="movie-explainer-views"><i class="fa fa-eye"></i> {{ formatNumber(explainer.views) }}</span>
                    <span class="movie-explainer-likes"><i class="fa fa-heart"></i> {{ formatNumber(explainer.likes) }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 最新上映电影解说 -->
          <div class="new-movies-section">
            <h3 class="new-movies-title">🆕 最新上映电影解说</h3>
            <div class="new-movies-slider">
              <div 
                v-for="newMovie in newReleaseMovies" 
                :key="newMovie.id"
                class="new-movie-item"
                @click="playMovieExplainer(newMovie)"
              >
                <div class="new-movie-poster">
                  <img :src="newMovie.moviePoster" alt="{{ newMovie.movieTitle }}" class="movie-poster-image">
                </div>
                <p class="new-movie-title">{{ newMovie.movieTitle }}</p>
                <p class="new-movie-explainer">{{ newMovie.author }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'EntertainmentView',
  data() {
    return {
      // 标签页数据
      tabs: [
        { key: 'funnyVideos', name: '搞笑视频' },
        { key: 'movieExplainers', name: '电影解说' },
      ],
      activeTab: 'funnyVideos',
      
      // 电影分类
      movieCategories: ['全部', '动作', '喜剧', '科幻', '悬疑', '恐怖', '爱情', '动画'],
      activeMovieCategory: '全部',
      
      // 热门搞笑视频
      hotFunnyVideo: {
        id: 1,
        title: '当你在游戏中遇到菜鸟队友，笑到停不下来的真实反应！',
        thumbnail: '/src/assets/周杰伦.png',
        duration: '08:45',
        author: '搞笑解说小明',
        views: 15200000,
        likes: 980000,
        description: '这个视频记录了玩家在游戏中遇到的各种搞笑菜鸟队友，他们的操作让人哭笑不得，看完后保证让你笑到肚子痛！',
      },
      
      // 搞笑视频列表
      funnyVideos: [
        { 
          id: 2, 
          title: '熊孩子整蛊父母的10大高能瞬间', 
          thumbnail: '/src/assets/悟空.jpg', 
          duration: '06:30', 
          author: '家庭欢乐时刻', 
          views: 8900000, 
          likes: 560000, 
        },
        { 
          id: 3, 
          title: '狗狗的迷惑行为大赏，看完笑喷了', 
          thumbnail: '/src/assets/黑悟空.jpg', 
          duration: '05:15', 
          author: '萌宠日记', 
          views: 12500000, 
          likes: 890000, 
        },
        { 
          id: 4, 
          title: '外国人第一次吃中国美食的真实反应', 
          thumbnail: '/src/assets/二次元美食节海报_3.jpg', 
          duration: '07:45', 
          author: '中外美食探索', 
          views: 9800000, 
          likes: 670000, 
        },
        { 
          id: 5, 
          title: '监考老师的那些神操作，学生们都惊呆了', 
          thumbnail: '/src/assets/喜剧电影.jpeg', 
          duration: '04:20', 
          author: '校园趣事多', 
          views: 6300000, 
          likes: 420000, 
        },
        { 
          id: 6, 
          title: '健身房里的搞笑时刻，看完再也不敢健身了', 
          thumbnail: '/src/assets/周杰伦.png', 
          duration: '05:50', 
          author: '健身囧事', 
          views: 7500000, 
          likes: 480000, 
        },
        { 
          id: 7, 
          title: '夫妻日常搞笑对话，太真实了', 
          thumbnail: '/src/assets/悟空.jpg', 
          duration: '06:15', 
          author: '夫妻生活秀', 
          views: 11200000, 
          likes: 750000, 
        },
      ],
      
      // 电影解说列表
      movieExplainers: [
        { 
          id: 1, 
          title: '《奥本海默》深度解析：诺兰如何重构原子弹之父的一生', 
          thumbnail: '/src/assets/周杰伦.png', 
          duration: '18:30', 
          movieTitle: '奥本海默', 
          movieScore: '9.2', 
          category: '传记', 
          author: '电影解析师', 
          views: 5200000, 
          likes: 380000, 
          moviePoster: '/src/assets/悟空.jpg', 
        },
        { 
          id: 2, 
          title: '《碟中谍7》动作场面解析：阿汤哥又双叒叕玩命了！', 
          thumbnail: '/src/assets/悟空.jpg', 
          duration: '15:45', 
          movieTitle: '碟中谍7：致命清算（上）', 
          movieScore: '8.7', 
          category: '动作', 
          author: '动作片研究室', 
          views: 4800000, 
          likes: 320000, 
          moviePoster: '/src/assets/黑悟空.jpg', 
        },
        { 
          id: 3, 
          title: '《芭比》电影深度解读：粉色外壳下的女性主义内核', 
          thumbnail: '/src/assets/黑悟空.jpg', 
          duration: '22:10', 
          movieTitle: '芭比', 
          movieScore: '8.4', 
          category: '喜剧', 
          author: '影视评论专家', 
          views: 6500000, 
          likes: 450000, 
          moviePoster: '/src/assets/二次元美食节海报_3.jpg', 
        },
        { 
          id: 4, 
          title: '《消失的她》剧情解析：反转再反转的悬疑佳作', 
          thumbnail: '/src/assets/二次元美食节海报_3.jpg', 
          duration: '16:25', 
          movieTitle: '消失的她', 
          movieScore: '8.8', 
          category: '悬疑', 
          author: '悬疑片爱好者', 
          views: 8900000, 
          likes: 620000, 
          moviePoster: '/src/assets/喜剧电影.jpeg', 
        },
        { 
          id: 5, 
          title: '《流浪地球2》科学细节解析：哪些是真实可行的？', 
          thumbnail: '/src/assets/喜剧电影.jpeg', 
          duration: '25:30', 
          movieTitle: '流浪地球2', 
          movieScore: '9.5', 
          category: '科幻', 
          author: '科幻电影解析', 
          views: 12500000, 
          likes: 980000, 
          moviePoster: '/src/assets/周杰伦.png', 
        },
        { 
          id: 6, 
          title: '《长安三万里》历史人物解析：李白与高适的真实友谊', 
          thumbnail: '/src/assets/周杰伦.png', 
          duration: '19:15', 
          movieTitle: '长安三万里', 
          movieScore: '9.1', 
          category: '动画', 
          author: '历史与电影', 
          views: 7800000, 
          likes: 560000, 
          moviePoster: '/src/assets/悟空.jpg', 
        },
      ],
      
      // 最新上映电影
      newReleaseMovies: [
        { 
          id: 7, 
          title: '《坚如磐石》深度解析：张艺谋的反腐力作', 
          movieTitle: '坚如磐石', 
          moviePoster: '/src/assets/黑悟空.jpg', 
          author: '电影深度解析', 
          views: 3500000, 
          likes: 280000, 
        },
        { 
          id: 8, 
          title: '《八角笼中》真实事件改编：格斗孤儿的逆袭之路', 
          movieTitle: '八角笼中', 
          moviePoster: '/src/assets/二次元美食节海报_3.jpg', 
          author: '真实故事改编', 
          views: 4200000, 
          likes: 310000, 
        },
        { 
          id: 9, 
          title: '《封神第一部》神话史诗解析：商周之际的权力游戏', 
          movieTitle: '封神第一部：朝歌风云', 
          moviePoster: '/src/assets/喜剧电影.jpeg', 
          author: '神话电影研究', 
          views: 5600000, 
          likes: 430000, 
        },
        { 
          id: 10, 
          title: '《茶啊二中》青春回忆：那些年我们一起追过的中二时光', 
          movieTitle: '茶啊二中', 
          moviePoster: '/src/assets/周杰伦.png', 
          author: '青春电影解说', 
          views: 2800000, 
          likes: 210000, 
        },
      ],
    }
  },
  computed: {
    // 过滤电影解说
    filteredMovieExplainers() {
      if (this.activeMovieCategory === '全部') {
        return this.movieExplainers
      }
      return this.movieExplainers.filter(explainer => explainer.category === this.activeMovieCategory)
    },
  },
  methods: {
    // 切换标签页
    switchTab(tab) {
      this.activeTab = tab
    },
    
    // 切换电影分类
    switchMovieCategory(category) {
      this.activeMovieCategory = category
    },
    
    // 播放搞笑视频
    playFunnyVideo(video) {
      console.log('播放搞笑视频:', video.title)
      // 实际应用中，这里应该跳转到视频播放页面
    },
    
    // 播放电影解说
    playMovieExplainer(explainer) {
      console.log('播放电影解说:', explainer.title)
      // 实际应用中，这里应该跳转到视频播放页面
    },
    
    // 格式化数字
    formatNumber(num) {
      if (num >= 100000000) {
        return (num / 100000000).toFixed(1) + '亿'
      } else if (num >= 10000) {
        return (num / 10000).toFixed(1) + '万'
      }
      return num.toString()
    },
  },
}
</script>

<style scoped>
/* 娱乐页面整体样式 */
.entertainment-view {
  min-height: 100vh;
  background-color: var(--bg-color);
}

/* 头部横幅样式 */
.entertainment-header {
  position: relative;
  height: 400px;
  overflow: hidden;
  margin-bottom: 30px;
}

.header-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.header-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.05);
  transition: transform 0.5s ease;
}

.entertainment-header:hover .header-image {
  transform: scale(1.1);
}

.header-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.7));
}

.header-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 40px;
  text-align: center;
  color: white;
}

.header-title {
  font-size: 48px;
  font-weight: bold;
  margin-bottom: 10px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.header-subtitle {
  font-size: 18px;
  opacity: 0.9;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* 主要内容区域 */
.entertainment-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px 40px;
}

/* 标签页导航 */
.tab-navigation {
  display: flex;
  background-color: var(--card-bg);
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 30px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.tab-item {
  flex: 1;
  padding: 12px 20px;
  border: none;
  background: none;
  color: var(--text-color);
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.3s ease;
  text-align: center;
}

.tab-item:hover {
  background-color: var(--hover-color);
  color: var(--primary-color);
}

.tab-item.active {
  background-color: var(--primary-color);
  color: white;
}

/* 标签页内容 */
.tab-content {
  background-color: var(--card-bg);
  border-radius: 8px;
  padding: 30px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* 通用区域标题样式 */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--border-color);
}

.section-title {
  font-size: 24px;
  font-weight: 600;
  color: var(--text-color);
  margin: 0;
}

.section-more {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: color 0.3s ease;
}

.section-more:hover {
  color: var(--primary-color);
}

/* 热门搞笑视频样式 */
.hot-funny-section {
  margin-bottom: 30px;
}

.hot-funny-video {
  display: flex;
  gap: 20px;
  background-color: var(--card-bg);
  border-radius: 8px;
  overflow: hidden;
  transition: box-shadow 0.3s ease;
  cursor: pointer;
}

.hot-funny-video:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.hot-video-thumbnail {
  position: relative;
  width: 50%;
  min-height: 300px;
  overflow: hidden;
  flex-shrink: 0;
}

.hot-video-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.hot-funny-video:hover .hot-video-image {
  transform: scale(1.05);
}

.hot-video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease;
}

.hot-funny-video:hover .hot-video-overlay {
  background-color: rgba(0, 0, 0, 0.3);
}

.play-icon {
  font-size: 80px;
  color: white;
  opacity: 0.8;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.hot-funny-video:hover .play-icon {
  opacity: 1;
  transform: scale(1.1);
}

.hot-video-duration {
  position: absolute;
  bottom: 15px;
  right: 15px;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 5px 12px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
}

.hot-video-info {
  flex: 1;
  padding: 20px;
  display: flex;
  flex-direction: column;
}

.hot-video-title {
  font-size: 22px;
  font-weight: 600;
  color: var(--text-color);
  margin: 0 0 15px 0;
}

.hot-video-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.hot-video-author {
  font-size: 16px;
  color: var(--primary-color);
  font-weight: 500;
}

.hot-video-stats {
  display: flex;
  gap: 20px;
  font-size: 14px;
  color: var(--text-secondary);
}

.hot-video-views, .hot-video-likes {
  display: flex;
  align-items: center;
  gap: 5px;
}

.hot-video-description {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
  flex: 1;
}

/* 搞笑视频列表样式 */
.funny-videos-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.funny-video-item {
  display: flex;
  gap: 15px;
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}

.funny-video-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

.funny-video-thumbnail {
  position: relative;
  width: 300px;
  height: 180px;
  flex-shrink: 0;
  overflow: hidden;
}

.funny-video-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.funny-video-item:hover .funny-video-image {
  transform: scale(1.05);
}

.funny-video-duration {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.funny-video-info {
  flex: 1;
  padding: 15px;
  display: flex;
  flex-direction: column;
}

.funny-video-title {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-color);
  margin: 0 0 10px 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.funny-video-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
}

.funny-video-author {
  font-size: 14px;
  color: var(--primary-color);
}

.funny-video-stats {
  display: flex;
  gap: 15px;
  font-size: 12px;
  color: var(--text-secondary);
}

.funny-video-views, .funny-video-likes {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* 电影分类样式 */
.movie-categories {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.category-btn {
  padding: 8px 20px;
  border: 1px solid var(--border-color);
  background-color: var(--card-bg);
  color: var(--text-color);
  border-radius: 20px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.category-btn:hover {
  border-color: var(--primary-color);
  color: var(--primary-color);
}

.category-btn.active {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: white;
}

/* 电影解说网格样式 */
.movie-explainers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.movie-explainer-card {
  background-color: var(--card-bg);
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}

.movie-explainer-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.movie-explainer-thumbnail {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 比例 */
  overflow: hidden;
}

.movie-explainer-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.movie-explainer-card:hover .movie-explainer-image {
  transform: scale(1.05);
}

.movie-explainer-duration {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.movie-score {
  position: absolute;
  top: 8px;
  right: 8px;
  background-color: rgba(251, 114, 153, 0.9);
  color: white;
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: bold;
}

.movie-explainer-info {
  padding: 15px;
}

.movie-explainer-title {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-color);
  margin: 0 0 8px 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.movie-title {
  font-size: 14px;
  color: var(--primary-color);
  margin: 0 0 10px 0;
  font-weight: 500;
}

.movie-explainer-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.movie-explainer-author {
  font-size: 14px;
  color: var(--text-secondary);
}

.movie-explainer-stats {
  display: flex;
  gap: 15px;
  font-size: 12px;
  color: var(--text-secondary);
}

.movie-explainer-views, .movie-explainer-likes {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* 最新上映电影样式 */
.new-movies-section {
  margin-top: 30px;
}

.new-movies-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-color);
  margin: 0 0 15px 0;
}

.new-movies-slider {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  padding-bottom: 10px;
  scrollbar-width: thin;
  scrollbar-color: var(--border-color) transparent;
}

.new-movies-slider::-webkit-scrollbar {
  height: 6px;
}

.new-movies-slider::-webkit-scrollbar-track {
  background: transparent;
}

.new-movies-slider::-webkit-scrollbar-thumb {
  background-color: var(--border-color);
  border-radius: 3px;
}

.new-movie-item {
  flex: 0 0 auto;
  width: 150px;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.new-movie-item:hover {
  transform: translateY(-5px);
}

.new-movie-poster {
  width: 150px;
  height: 220px;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.movie-poster-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.new-movie-item:hover .movie-poster-image {
  transform: scale(1.05);
}

.new-movie-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-color);
  margin: 0 0 5px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.new-movie-explainer {
  font-size: 12px;
  color: var(--text-secondary);
  margin: 0;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .entertainment-header {
    height: 300px;
  }
  
  .header-title {
    font-size: 36px;
  }
  
  .header-subtitle {
    font-size: 16px;
  }
  
  .hot-funny-video {
    flex-direction: column;
  }
  
  .hot-video-thumbnail {
    width: 100%;
    min-height: 200px;
  }
  
  .movie-explainers-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }
  
  .funny-video-thumbnail {
    width: 200px;
    height: 120px;
  }
}

@media (max-width: 480px) {
  .entertainment-header {
    height: 200px;
  }
  
  .header-content {
    padding: 20px;
  }
  
  .header-title {
    font-size: 28px;
  }
  
  .tab-content {
    padding: 20px 15px;
  }
  
  .hot-video-info {
    padding: 15px;
  }
  
  .hot-video-title {
    font-size: 18px;
  }
  
  .movie-explainers-grid {
    grid-template-columns: 1fr;
  }
  
  .funny-video-item {
    flex-direction: column;
  }
  
  .funny-video-thumbnail {
    width: 100%;
    height: 180px;
  }
  
  .new-movie-item {
    width: 120px;
  }
  
  .new-movie-poster {
    width: 120px;
    height: 180px;
  }
}
</style>